//  Copyright (c) 2018-present, Cruise LLC
//
//  This source code is licensed under the Apache License, Version 2.0,
//  found in the LICENSE file in the root directory of this source tree.
//  You may not use this file except in compliance with the License.

@import "~webviz-core/src/styles/colors.module.scss";
@import "~webviz-core/src/styles/mixins.module.scss";

$padding: 6px;

// this is the padding of nested levels of the tree
// applied in javascript so it can be multiplied by the depth
:export {
  indentWidth: 20;
  paddingLeft: $padding * 3;
}

.children {
  background-color: rgba(0, 0, 0, 0.2);
}

.checkbox {
  @extend %list-item-icon;
  margin-right: 6px;
  opacity: 0.6;
  &:hover {
    opacity: 1;
  }
  &.disabled {
    pointer-events: none;
  }
}

// this icon looks a bit large compared to the others
// make it smaller so its less drastic
.blockHelperIcon {
  font-size: 14px !important;
  top: 0;
  // since its smaller, center it a bit
  padding-left: 2px;
  pointer-events: none;
}

.header {
  position: relative;
  display: flex;
  flex-direction: row;
  padding-right: $padding;
  align-items: center;

  $height: 30px;

  // vertically center text and icons
  vertical-align: center;
  line-height: $height;
  height: $height;

  cursor: pointer;

  &:hover {
    background: #3b2e76;
  }

  // the text should grow and shrink to the free space in the container
  // if it shrinks past the text length, truncate text & show ellipsis
  .text {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 4px;
  }

  .extraIcon {
    opacity: 0.5;
    margin-right: 6px;
  }

  .expand-icon {
    font-size: 14px;
    opacity: 0.75;
    position: absolute;
    left: 0;
  }
}

.invisible {
  visibility: hidden;
}

.hasChildren {
  color: $text-bright;
}

.disabled {
  color: $text-disabled;
  cursor: auto;
  &:hover {
    background: transparent;
  }
}
